<!--
 * @author luguoxiang
 * @date 2022/9/17
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <div v-for="node in data" :key="node.key" class="lg-tree-item">
    <div
      class="lg-tree-title"
      :class="{ 'lg-tree-expanded': node.expanded, 'lg-tree-active': active === node.value }"
      @click="onClick(node)"
    >
      <span class="lg-tree-icon" :class="{ 'lg-tree-not-child': !node.ds?.length }" @click.stop="expand(node)">
        <chevron-right-icon />
        <chevron-down-icon />
      </span>
      <t-checkbox
        :checked="node.checked"
        :indeterminate="node.indeterminate"
        @change="onChange(node, $event)"
        @click.stop
      />
      <div class="lg-tree-label">{{ node.label }}</div>
    </div>
    <template v-if="node.expanded">
      <div class="lg-tree-children">
        <directory :active="active" :data="node.ds" @change="onChange" @click-node="onClick" />
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ChevronDownIcon, ChevronRightIcon } from 'tdesign-icons-vue-next';
import Directory from './Directory.vue';

const emits = defineEmits(['change', 'clickNode']);
const props = defineProps({
  data: {
    type: Array,
    default: null,
  },
  active: {
    type: [String, Number],
    default: null,
  },
});

function expand(node: any) {
  node.expanded = !node.expanded;
}

/**
 * 节点选中状态变化
 * @param node
 * @param checked
 */
function onChange(node: any, checked: boolean) {
  emits('change', node, checked);
}

function onClick(e) {
  emits('clickNode', e);
}
</script>

<style lang="less" scoped>
@border: 1px solid var(--td-component-border);
@indent: var(--lg-tree-indent, 1em);
.lg-tree-item {
  position: relative;
  > .lg-tree-children {
    padding-left: @indent;
    position: relative;
    /* 竖线 */
    &:before {
      border-left: @border;
      content: '';
      height: calc(100% - 1em);
      width: 0;
      position: absolute;
      left: 0.5em;
      bottom: calc(var(--app-height-component) / 2);
    }
    > .lg-tree-item {
      /* 横线 */
      &:after {
        border-bottom: @border;
        content: '';
        height: 0;
        width: @indent;
        position: absolute;
        left: calc(0.5em - @indent);
        top: calc(var(--app-height-component) / 2);
      }
    }
  }

  > .lg-tree-title {
    display: flex;
    height: var(--app-height-component);
    line-height: var(--app-height-component);
    .lg-tree-icon {
      cursor: pointer;
      display: inline-flex;
      width: 2em;
      padding: 0 0.5em;
      align-items: center;
    }
    .lg-tree-icon.lg-tree-not-child {
      cursor: text;
      > * {
        display: none;
      }
    }
    .lg-tree-label {
      cursor: pointer;
    }
  }

  .lg-tree-menu {
    .t-checkbox {
      margin-right: var(--app-space-horizontal);
    }
  }

  > .lg-tree-expanded {
    .t-icon-chevron-right {
      display: none;
    }
    .t-icon-chevron-down {
      display: unset;
    }
  }
  > .lg-tree-active {
    color: var(--app-color-primary);
    font-weight: 600;
  }
  .t-icon-chevron-down {
    display: none;
  }
  .lg-tree-ps {
    margin-left: calc(2em + var(--lg-tree-indent, 1em));
  }
  .lg-tree-p {
    line-height: var(--app-height-component);
    display: inline-block;
    margin-right: var(--app-space-horizontal);
  }
}
</style>
